<template>
  <div class="main-container">
    <el-card class="box-card">
      <div class="logo">
        <img src="../assets/logo.png" alt="系统logo">
        <h1>密码重置</h1>
      </div>

      <el-form :model="formData" ref="formRef" class="main-form">
        <el-form-item
            prop="type"
            :rules="[{ required: true, message: '请选择用户类型', trigger: 'change' }]"
        >
          <el-select
              v-model="formData.type"
              placeholder="请选择用户类型"
              size="large"
              class="type-select"
          >
            <el-option label="老人" value="ELDER" />
            <el-option label="护工" value="STAFF" />
            <el-option label="家属" value="FAMILY" />
          </el-select>
        </el-form-item>
        <el-form-item prop="tel"
                      :rules="[{required:true,message:'请输入手机号',trigger:[ 'blur','change']}]">
          <el-input
              placeholder="请输入手机号"
              size="large"
              class="custom-input"
              v-model.trim="formData.tel"
              clearable
          >
            <template #prefix>
              <el-icon class="input-icon">
                <Phone/>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="code"
                      :rules="[{required:true,message:'请输入验证码',trigger:[ 'blur','change']}]">
          <el-input
              placeholder="请输入验证码"
              v-model.trim="formData.code"
              size="large"
              class="custom-input"
              clearable
          >
            <template #prefix>
              <el-icon class="input-icon">
                <Lock/>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password"
                      :rules="[{required:true,message:'请输入密码',trigger:[ 'blur','change']}]">
          <el-input
              type="password"
              placeholder="请输入密码"
              size="large"
              show-password
              class="custom-input"
              v-model.trim="formData.password"
              clearable
          >
            <template #prefix>
              <el-icon class="input-icon">
                <Lock/>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="" style="width: 100%">
          <el-button
              type="primary"
              size="large"
              class="register-btn"
              @click="submitForm"
          >
            重置密码
          </el-button>

        </el-form-item>

        <div class="footer-links">
          <router-link to="/login" class="link" style="text-align: right">返回登录</router-link>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import {ElMessage} from 'element-plus';
import http from "@/utils/http.js";
import router from "@/router/index.js";
import {Lock, Phone} from "@element-plus/icons-vue";

const formRef = ref(null);
const formData = ref({
  type: '',
  tel: '',
  code: '',
  password: ''
});


const submitForm = () => {
  formRef.value.validate((valid) => {
    if (!valid) {
      return
    }
    http.post("/common/retrievePassword", formData.value).then(res => {
      if (!res) {
        return
      }
      ElMessage({
        message: "重置成功，正在跳转",
        type: "success"
      });
      window.location.href = "/login";
    });
  });
}
</script>

<style scoped>
@import '../assets/css/auth.css';


</style>
